import useDraggable from "../../../hooks/useDraggable";
import Draggable from 'react-draggable';

let isDragging = false;
export default (props: { onClick: () => void }) => {
  // 拖拽控制
  const {draggleRef, bounds, onStart} = useDraggable()

  const handleClick = () => {
    if (isDragging) return;
    props.onClick()
  };

  return <div className={'fixed right-50 top-50'}>
    <Draggable
      allowAnyClick={false}
      bounds={bounds}
      nodeRef={draggleRef}
      onStart={(event, uiData) => onStart(event, uiData)}
      onDrag={() => {
        isDragging = true;
      }}
      onStop={() => {
        setTimeout(() => (isDragging = false), 0);
      }}
    >
      <div ref={draggleRef} className={'shadow-[0_0_10px_4px_rgba(0,0,0,0.1)] cursor-pointer w-70 rounded-full'}
      >
        <svg onClick={handleClick} style={{color: 'rgb(63, 207, 184)'}} focusable="false"
             aria-hidden="true" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg"
             xmlnsXlink="http://www.w3.org/1999/xlink" width="70px" height="70px" version="1.1">
          <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
            <circle stroke="currentColor" strokeWidth="2" fill="#FFFFFF" cx="35" cy="35" r="34"></circle>
            <g transform="translate(15.000000, 17.000000)" fill="currentColor" fillRule="nonzero">
              <path
                d="M37.4998047,14.75 C35.9999219,6.25015625 28.7499609,0.000234375 20.0001562,0.000234375 C11.25,0.000234375 4.0003125,6.50019531 2.50015625,14.7499609 C1.00019531,16.0000391 0.000234375,18.2501172 0.000234375,20.5000391 C0.000234375,23.5 1.75019531,26.9999609 4.50019531,26.9999609 C7.00007812,26.9999609 7.00007812,24.2500391 7.00007812,20.5000391 C7.00007812,17.0000781 7.00007812,14.2500781 5.25019531,14.0000391 C6.75003906,7.25015625 12.7501563,2.25015625 20.0001562,2.25015625 C27.2498437,2.25015625 33.2499219,7.25015625 34.7498437,13.7501953 C32.9998828,14.2501172 32.9998828,16.7500391 32.9998828,20.2499609 C32.9998828,22.7273828 32.9998828,24.4681641 33.48625,25.7157031 C33.4907031,25.7271484 33.5022656,25.7379297 33.4997656,25.7499219 C32.0833203,32.4609375 28,35.2499219 23.9999219,36.25 C23.25,35.2499219 21.7500391,34.5000391 20.0001172,34.5000391 C17.4998828,34.5000391 15.5000391,35.7500391 15.5000391,37.2499609 C15.5000391,38.7501172 17.4998828,39.9999609 20.0001172,39.9999609 C22.5,39.9999609 24.5,38.7501172 24.5,37.2499609 C28.4999219,36.25 33.3333203,32.7994922 34.2499219,26.4998438 C34.2483594,26.5105859 34.2655078,26.515 34.2736719,26.5221875 C34.5305078,26.7499219 35.0152344,26.7499219 35.4998047,26.7499219 C38.2497656,26.7499219 39.9997656,23.2499219 39.9997656,20.2499219 C39.9997656,18.2501172 38.9997656,16.0000391 37.4998047,14.75 Z"></path>
            </g>
          </g>
        </svg>
      </div>
    </Draggable>
  </div>

}
